<template>
    <div class="main">
        <a-form :inline="false" :model="formData" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" size="small"
            labelAlign="left">
            <a-collapse v-model="activeKey">
                <a-collapse-panel key="1">
                    <span slot="header" class="collapseHeader">
                        <a-icon type="setting" />基本设置
                    </span>
                    <!-- <a-form-item label="流程类型">
                        <a-select placeholder="请选择" v-model="formData.processType" >
                            <a-select-option :key="0">
                                测试流程
                            </a-select-option>
                            <a-select-option :key="1">
                                OA办公
                            </a-select-option>
                            <a-select-option :key="2">
                                业务办理
                            </a-select-option>
                        </a-select>
                    </a-form-item> -->
                    <a-form-item label="流程标识key">
                        <a-input placeholder="请输入" :disabled="onlyRead" v-model="formData.id"></a-input>
                    </a-form-item>
                    <a-form-item label="流程名称">
                        <a-input placeholder="请输入" :disabled="onlyRead" v-model="formData.name"></a-input>
                    </a-form-item>
                    <a-form-item label="节点描述">
                        <a-textarea placeholder="请输入" v-model="formData.documentation"
                            :autoSize="{ minRows: 2, maxRows: 5 }" />
                    </a-form-item>
                    <a-form-item label="全局监听">
                        <a-badge :count="taskListener.length" :number-style="{ backgroundColor: '#108ee9' }">
                            <a-button @click="showModal('globalModule')">编辑</a-button>
                        </a-badge>
                    </a-form-item>

                </a-collapse-panel>
                <!-- <a-collapse-panel key="3" :disabled="false"><span slot="header" class="collapseHeader">
                        <a-icon type="notification" />全局监听
                    </span>
                    <a-icon slot="extra" type="plus" @click.stop="showModal('globalModule')" />
                    <a-table :columns="globalColumns" :dataSource="taskListener" bordered></a-table>
                </a-collapse-panel> -->
            </a-collapse>
        </a-form>
        <globalListening ref="globalModule" @setData="setTaskListener" :taskListener="taskListener" />
    </div>
</template>

<script>
import mixinPanel from "../../common/mixinPanel"
import globalListening from "./modules/globalListening.vue"
import { commonParse } from '../../common/parseElement'
export default {
    mixins: [mixinPanel],
    props: {
        onlyRead: {
            type: Boolean,
            default: false
        },
    },
    components: {
        globalListening
    },
    data() {
        return {
            formData: {
                id: '',
                name: '',
                code: '',
                processType: 1
            },
            taskListener: []
        }
    },
    methods: {
        setTaskListener(val) {
            this.taskListener = val;
            this.updateElement("taskListener");
        },
    },
    created() {
        let cache = commonParse(this.element)
        this.formData = cache
    },
    mounted() {
        this.getDataElement("taskListener")
    }
}
</script>

<style>

</style>